// 实现初始化功能， 通过混入的方式实现
import { initState } from "./status.js";
import { compileToFunction } from "./compiler/index.js"

import { mountComponent, callHook } from "./lifecycle.js";
import { mergeOptions } from "./utils/index.js";
// 在原型上添加一个_init方法
export const initMixin = function (Vue) {
  // 初始化流程
  Vue.prototype._init = function (options) {

    // 数据的劫持
    const vm = this;
    // 将 用户传入的 和 全局的 选项进行合并
    vm.$options = mergeOptions(vm.constructor.options, options);
    // console.log(vm.$options);
    callHook(vm, "beforeCreate")
    // 初始化状态
    initState(vm); // 分割代码

    callHook(vm, "created")
    // 如果用户传入了el属性， 需要将页面渲染出来
    // 如果用户传入了el属性，就要实现挂在流程
    if (vm.$options.el) {
      vm.$mount(vm.$options.el);
    }
  }

  Vue.prototype.$mount = function (el) {
    const vm = this;
    const options = vm.$options;
    el = document.querySelector(el);
    // 默认先查找有没有render方法， 如果没有render， 会采用template， 如果template也没有就用el中的内容

    if (!options.render) {
      // 对模板进行编译
      let template = options.template; // 取出模板
      if (!template && el) {
        template = el.outerHTML;
      }
      // 我们需要将template 转化为render方法 vue1.0是字符串， vue2.0虚拟dom
      const render = compileToFunction(template);
      options.render = render;
      // 
    }
    // options.render

    // 渲染当前的组件， 挂载这个组件
    mountComponent(vm, el);

  }
}